<template>
  <div class="message" id="message1"></div>
  <div class="wrap_context">
    <div v-show="inputting" class="inputting">对方正在输入中...</div>
    <input type="text" placeholder="请输入" id="txt">
    <input type="button" value="发送" @click="sendMsg">
    <input type="button" value="关闭连接" @click="closeConn">
    <input type="button" value="重新建立连接" @click="connect">
  </div>

  <select v-model="selected" @change="change_result">
    <option :value="item.value" v-for="item in person_list">{{item.name}}</option>
  </select>
  <div>您选择的房间为：{{selected}}</div>
  <div class="message" id="message2"></div>
  <div class="wrap_context">
    <div v-show="inputting2" class="inputting">对方正在输入中...</div>
    <textarea type="text" placeholder="请输入" @keydown.enter="handleKeyDown" v-model="inputValue" @focus="get_focus"  @blur="get_blur" id="txt2"></textarea>
    <input type="button" value="发送" @click="websocket2_sendMsg">
    <input type="button" value="关闭连接" @click="websocket2_closeConn">
    <input type="button" value="重新建立连接" @click="websocket2_connect">
  </div>
</template>

<script setup>
import {closeConn, connect, sendMsg} from "@/utils/websocket1.js";
import {
  websocket2_connect,
  websocket2_sendMsg,
  websocket2_closeConn,
  websocket2_send_flag
} from "@/utils/websocket2.js";
import {person_list} from "@/utils/common_data.js";
import {getCurrentInstance, onUnmounted, ref} from "vue";


const { proxy } = getCurrentInstance()
const selected = ref(111)
const inputValue = ref('')
const inputting = ref(false)
const inputting2 = ref(false)
const submitMessage = () => {
  console.log('提交消息:', inputValue.value);
  // 这里可以添加提交逻辑

};
const handleKeyDown = (e) => {
  if (e.shiftKey) {
    return;
  }
  // 单独按下 Enter 键
  e.preventDefault();
  inputValue.value = ''; // 清空输入框
}

const change_result = ()=>{
  console.log("selected", selected.value)
  websocket2_closeConn()
  setTimeout(()=>{
    websocket2_connect(selected.value)
  },500)
}

proxy.$bus.on("change_flag", (flag)=>{
  console.log('flag.split(" ")', flag.split(" "))
  inputting.value = parseInt(flag.split(" ")[1])
})

proxy.$bus.on("change_flag2", (flag)=>{
  console.log('change_flag2 flag.split(" ")', flag.split(" "))
  let user_info = flag.split(" ")
  if (user_info[0] !== "张三"){
    inputting2.value = parseInt(user_info[1])
  }
})


// 注意一定要在组件销毁时把事件监听对象销毁了，不然会引起内存泄漏
onUnmounted(()=>{
  proxy.$bus.off("change_flag")
  proxy.$bus.off("change_flag2")
})
const get_focus = ()=>{
  websocket2_send_flag("张三 1")
}

const get_blur = ()=>{
  websocket2_send_flag("张三 0")
}

// let socket = null;
// const connect = ()=> {
//   socket = new WebSocket("ws:/127.0.0.1:8000/room/1111/");
//
//   // 连接完成以后 客户端自动触发
//   socket.onopen = function (event) {
//     let tag = document.createElement("div")
//     tag.innerHTML = "连接已建立"
//     document.getElementById("message").appendChild(tag)
//   }
//
//   // 回调函数 当服务端有消息发送到时，自动触发
//   socket.onmessage = function (event) {
//     console.log(event.data);
//     let tag = document.createElement("div");
//     tag.innerText = event.data;
//     document.getElementById("message").appendChild(tag)
//   }
//
//   // 当连接关闭时，触发
//   socket.onclose = function (event) {
//     let tag = document.createElement("div")
//     tag.innerHTML = "连接已断开"
//     document.getElementById("message").appendChild(tag)
//
//   }
// }
// const sendMsg = ()=> {
//   let tag = document.getElementById("txt")
//   socket.send(tag.value)
// }
// const closeConn = ()=> {
//   // 向服务端发送断开连接
//   socket.close();
// }


connect(proxy)
websocket2_connect(proxy, 111)
</script>
<style scoped lang="less">
.message{
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #dddddd;
  width: 100%;
}
.wrap_context{
  position: relative;
  .inputting{
    position: absolute;
    left: 20px;
    top: -25px;
  }
}

</style>